<?xml version="1.0" encoding="UTF-8"?>
 <!DOCTYPE html PUBLIC  "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <meta name="keywords" content="W3C SVG 1.1 Test Suite testsuite mobile"/>
 <meta name="description" content="W3C SVG 1.1 Test Suite"/>
 <title>
SVG 1.1 test:fonts-elem-02-t </title>
 <style type="text/css">
 <!--
 body { font-family: "Lucida Grande", verdana, helvetica, sans-serif; line-height: 1.3; text-align: left; margin-top: 0; margin-bottom: 0 }
 .pageTitle { line-height: 1.5; font-weight: bold; margin-bottom: 1em;}
 .pageSubTitle  { color: blue; font-size: 200%; font-weight: bold }
 .openChapter { color: blue; line-height: 1.3; font-weight: bold }
 .openSection { color: blue; line-height: 125%; font-weight: bold }
 .info { color: black; line-height: 1.2; font-size: 90%; }
 p { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
 .linkbar { text-align: center; margin: 1em 1em 0.25em 1em;}
 blockquote { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
 .opscript {margin-left: 3%; margin-right: 3%; }
 .opscript p { margin-top: 0.7em}
 .navbar {background: black; color: white; font-weight: bold}
 -->
 </style>
 </head>
 <body class="bodytext">

	<div class="linkbar"> 
<p>
<a href="full-fonts-elem-02-t.html">Full version</a>, <a href="basic-fonts-elem-02-t.html">Basic version</a>, <a href="tiny-fonts-elem-02-t.html">Tiny version</a></p>
<p>Specification link: <a target="spec" href="http://www.w3.org/TR/SVG11/fonts.html#FontElement">20.3 The 'font' element</a></p>
 <p>
				<a href="tiny-fonts-elem-01-t.html">fonts-elem-01-t ←</a> 
				<a href="tiny-index.html">index</a>
				<a href="tiny-fonts-elem-05-t.html">→ fonts-elem-05-t</a>
						</p></div>

	<table align="center" border="0" cellspacing="0" cellpadding="10">
		<tr>
			<td align="center" colspan="3">
				<table border="0" cellpadding="8">
					<tr>
						<td align="center" colspan="2" class="pageTitle">
							<h1>fonts-elem-02-t</h1>
						</td>
					</tr>
					<tr  class="navbar">
						<td align="center">
							SVG Image
						</td>
						<td align="center">
							PNG Image
						</td>
					</tr>
					<tr>
						<td align="right">
   	    		  			
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
            codebase="" id="mySVGViewerObj" width=80 height=60>
    <param name=movie value="../SvgViewer.swf">
    <param name="FlashVars" value="sourceType=url_svg&svgURL=../svggen/fonts-elem-02-t.svg">
    <param name="wmode" value="transparent">
    <embed play=false name="mySVGViewerObj" 
	    src="../SvgViewer.swf" quality=high wmode="transparent"
	    width=80 height=60 type="application/x-shockwave-flash"
	    FlashVars="sourceType=url_svg&svgURL=../svggen/fonts-elem-02-t.svg">
    </embed >
</object>
						</td>
						<td align="left">
							<img alt="raster image of fonts-elem-02-t" src="../png/tiny-fonts-elem-02-t.png" width="80" height="60"/>
						</td>
					</tr>
				</table>
			</td>
		</tr>
	</table>

               
<div class="opscript">
			<p>This is an accuracy test for embedded SVG fonts. The font &quot;Comic Sans&quot; 
		(available from Microsoft) has been converted into an SVG font and embedded
		in the SVG file. The test contains two text areas, each with the character
		string "Ay&#xd6;@&#xe7;" drawn at the same font size.
	    	</p>
			<p>The upper area has the placed glyphs as path elements filled with
		white over a solid black background (creating a white cutout). The
		embedded SVG font text is then drawn over the cutout. An implementation
		that passes this test should completely fill the cutout, leaving 
		a solid black area (some slight antialiasing effects may remain).
    		</p>
			<p>The lower area is the reverse of the upper area, with the placed
		black glyphs filling the cutout created by white SVG font text.
		 An implementation that passes this test should completely fill the 
		 cutout, leaving a solid black area (some slight antialiasing effects 
		 may remain).
    		</p>

		</div>
<div class="linkbar"> <p>
				<a href="tiny-fonts-elem-01-t.html">fonts-elem-01-t ←</a>
				<a href="tiny-index.html">index</a>
				<a href="tiny-fonts-elem-05-t.html">→ fonts-elem-05-t</a>
						</p></div>
</body>
</html>
